<template>
  <div class="container">
    <div class="login-head"></div>
    <div class="login-body">
      <div class="login-form">
        <p class="text">欢迎使用</p>
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 24 }"
          @submit="handleSubmit"
        >
          <a-form-item prop="username">
            <a-input
              allowClear
              v-model="initialValues.username"
              placeholder="请输入手机号"
            ></a-input>
          </a-form-item>
          <a-form-item prop="password">
            <a-input
              placeholder="请输入密码"
              v-model="initialValues.password"
              type="password"
            ></a-input>
          </a-form-item>
          <span class="login-captcha">
            <a-form-item prop="captcha">
              <a-input
                placeholder="请输入验证码"
                v-model="initialValues.captcha"
                class=""
              ></a-input>
            </a-form-item>
            <a-button type="primary" class="login-captcha-btn"
              >获取验证码</a-button
            >
          </span>
          <span class="login-remember">
            <a-form-item prop="remember">
              <a-checkbox v-model="initialValues.remember">
                记住密码
              </a-checkbox>
            </a-form-item>
            <span>忘记密码</span>
          </span>
          <div class="error-wrap">{{ error }}</div>

          <a-form-item :wrapper-col="{ span: 24 }">
            <a-button type="primary" class="primary-btn" html-type="submit">
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="login-bg"></div>
    </div>
    <div class="login-footer">
      <p class="copyright">
        {{ loginDate }} 杭州登虹科技有限公司｜
        <span class="record-number">浙ICP备16005993号-24｜</span>
        <span class="filing-warp">
          <span class="filing"> 浙公网安备 33010602012186号 </span>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
export default {
  name: 'login',
  components: {},

  data() {
    return {
      formLayout: 'horizontal',
      initialValues: {
        username: '',
        password: '',
        remember: '',
        captcha: '',
      },
      form: this.$form.createForm(this, {}),
      error: '',
      loginDate: new Date().getFullYear(),
    }
  },

  computed: {
    ...mapGetters({}),
  },

  beforeCreate() {},

  created() {
    const initialValues = {
      remember: false,
      username: '',
      password: '',
      captcha: '',
    }
    const ae = localStorage.getItem('ae')
    if (ae) {
      let _ = decrypt(ae).split(',')
      if (_ && _.length >= 2) {
        initialValues.remember = true
        initialValues.username = _[0]
        initialValues.password = _[1]
        initialValues.captcha = ''
      }
    }
    this.initialValues = initialValues
  },
  watch: {},
  methods: {
    ...mapActions({}),
    ...mapMutations({}),

    async handleSubmit() {
      let { username, password, remember, captcha } = this.initialValues
      try {
        await this.check(username, password, captcha)
        await this.$fetch
          .post('/api/login', { username, password, captcha })
          .then((resp) => {
            if (resp.code !== '0' && resp.code === '1090003') {
              throw '登录失败。账号或密码错误，或该账号无权限！'
            } else if (resp.code === '1090511') {
              throw '登录失败。账号或密码错误，或该账号无权限！'
            } else if (resp.code === '1094003') {
              throw '角色不存在'
            } else if (resp.code === 10088) {
              throw '验证码输入错误，请重新输入'
            } else if (resp.code !== '0') {
              throw '登录失败'
            }
            if (remember) {
              localStorage.setItem('ae', encrypt(`${username},${password}`))
            } else {
              localStorage.removeItem('ae')
            }
            location.href = resp.monitor ? '/' : '/home'
          })
      } catch (err) {
        this.error = err || '登录失败'
      }
    },

    check(username, password, captcha) {
      return new Promise((resolve, reject) => {
        if (!username) {
          reject('请输入账号')
        } else if (!password) {
          reject('请输入密码')
        } else if (!captcha) {
          reject('请输入验证码')
        } else {
          resolve()
        }
      })
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
